<template>
  <Menu :isSearch="false"></Menu>
  <div class="showSpace_box">
    <div style="height: 50px;margin: 80px 0 20px 0;">
      <n-input placeholder="搜索空间" @update:value="searchSpace" style="width: 800px;">
        <template #suffix>
          <n-icon :component="SearchSharp" />
        </template>
      </n-input>
    </div>
    <div v-for="item in spaceData" :key="item.space_id" class="space_box" @click="checkSpace(item.space_id)">
      <div class="item_image">
        <n-image
          width="120"
          :src="host + '/api/' + item.space_image"
        />
      </div>
      <div class="item_text">
        <div style="font-size: 20px;font-weight: 700;">{{ item.space_name }}</div>
        <div style="color: gray;margin-top: 5px;font-size: 13px;">{{ item.username }}创建，已运营{{item.create_day}}天，{{item.space_people}}加入</div>
        <div style="margin-top: 10px;">
          <n-ellipsis :line-clamp="2" :tooltip="false">
            {{ item.space_description }}
          </n-ellipsis>
        </div>
      </div>
    </div>
    <div style="margin-top: 40px;">
      <n-pagination v-if="isPage" v-model:page="page" size="large" :page-count="Math.ceil(spaceDataAll.length/10)" @update:page="changePage"/>
    </div>
    
  </div>
</template>

<script setup lang='ts'>
import {spaceDateType} from "../../types"
import {getAllSpace} from "../../api/space"
import { SearchSharp } from '@vicons/ionicons5'
import {ref,Ref,onMounted,inject} from "vue"
import Menu from "../../components/Menu.vue"
import { useRouter } from 'vue-router';
const host = ref(inject("host"))
const router = useRouter()

const spaceDataAll:Ref<Array<spaceDateType>> = ref([])

const spaceData:Ref<Array<spaceDateType>> = ref([])

const page = ref(1)
const isPage = ref(false)

onMounted(async() => {
  const res = await getAllSpace()
  if(res.code != "200"){
    window.$message.warning(res.message)
  }else{
    spaceData.value = res.data
    spaceDataAll.value = spaceData.value.filter(e => e.phone != localStorage.getItem("token"))
  }
  if(spaceDataAll.value.length > 10){
    isPage.value = true
  }
  spaceData.value = spaceDataAll.value.slice(0, 10)
})

const checkSpace = (space_id:number) => {
  router.push("/checkSpace/" + space_id)
}

const searchSpace = (value: string) => {
  if(isPage) {
    if(value == "") {
      isPage.value = true
      page.value = 1
      changePage(1)
    }else{
      isPage.value = false
      spaceData.value = spaceDataAll.value.filter((e:spaceDateType) => e.space_name.toUpperCase().includes(value.toUpperCase()))
    }
  }else{
    spaceData.value = spaceDataAll.value.filter((e:spaceDateType) => e.space_name.toUpperCase().includes(value.toUpperCase()))
  }
}

const changePage = (page:number) => {
  spaceData.value = spaceDataAll.value.slice((page-1)*10,page*10)
  window.scrollTo(0,0)
}
  
</script>

<style lang='scss' scoped>
  .showSpace_box{
    max-width: 1220px;
    min-height: calc(100vh - 50px);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
    .space_box{
      width: 800px;
      height: 120px;
      padding: 20px;
      // border-top: 1px solid rgba(92, 199, 199, 0.7);
      cursor: pointer;
      display: flex;
      background-color: var(--bs-content-background);
      margin-bottom: 15px;
      border-radius: 5px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
      // 过渡时间
      transition: all 0.2s;
      .item_image{
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
      }
      .item_text{
        width: 640px;
        margin-left: 30px;
      }
    }
    .space_box:hover{
      box-shadow: 0 2px 12px 0 rgba(92, 199, 199, 0.7);
      // 放大
      transform: scale(1.02);
    }
  }
</style>